<template>
    <div style="font-size:16px;font-weight: 600;">
        <el-radio></el-radio>公司关键字列表
    </div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <el-row>
            <!-- 人数范围 -->
            <el-form-item label="人数范围 ">
                <el-input type="text" placeholder="请输入" style="width: 150px;" clearable></el-input>
            </el-form-item>
            <el-text style="font-size:16px;margin-top:-30px;padding: 10px 10px "> __</el-text>
            <el-form-item label-width="0px">
                <el-input type="text" placeholder="请输入" style="width: 150px;" clearable></el-input>
            </el-form-item>
            <!-- 人员数据筐 -->
            <el-form-item>
                <el-checkbox label="人员数据筐" name="type"></el-checkbox>
            </el-form-item>
            <!--更新方式 -->
            <el-form-item>
                <el-button>更新列表</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="selectAll()">全选</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="reverseSelect()">反选</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancelSelect()">取消</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询人员</el-button>
            </el-form-item>
        </el-row>
        <div class="container">
            <el-row v-for="(item, index) in groupData()" :key="index" :style="getRowStyle(index)"
                class="row-with-border">
                <el-col :span="4" v-for="col in item" class="col-with-padding">
                    <div class="data-cell">
                        <el-checkbox v-model="col.selected" :checked="col.selected">{{ col.province }}</el-checkbox>
                        <span class="num">{{ col.data2 }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-form>
</template>

<script lang="ts" setup>
import { ElRow, ElCol } from "element-plus";
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import useView from '@/hooks/useView';

const view = reactive({
    dataForm: {
        id: "",
        input: "",
        value1: "",
        checked: false
    },
    data: [
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '山东', data2: '516854', selected: false },
        { province: '浙江', data2: '178676', selected: false },
        { province: '浙江', data2: '178676', selected: false },
    ]
});

//样式颜色
const getRowStyle = (index: number) => {
    const colors = ['rgba(247,247,247,1)', 'white'];
    return {
        'background-color': colors[index % colors.length]
    };
};

// 分组函数，将数据按每6个一组进行分组
const groupData = () => {
    const data = view.data;
    const result = [];
    for (let i = 0; i < data.length; i += 6) {
        const group = data.slice(i, i + 6);
        result.push(group);
    }
    return result;
};

// 全选功能实现
const selectAll = () => {
    const groupedData = groupData();
    groupedData.forEach((row: any[]) => {
        row.forEach((item: { selected: boolean; }) => {
            item.selected = true;
            console.log('修改后的item:', item);
        });
    });
};

// 反选功能实现
const reverseSelect = () => {
    const groupedData = groupData();
    groupedData.forEach((row: any[]) => {
        row.forEach((item: { selected: boolean; }) => {
            const reactiveItem = reactive(item);
            reactiveItem.selected = !reactiveItem.selected;
        });
    });
}

// 取消选中功能实现
const cancelSelect = () => {
    const groupedData = groupData();
    groupedData.forEach((row: any[]) => {
        row.forEach((item: { selected: boolean; }) => {
            item.selected = false;
            console.log('修改后的item:', item);
        });
    });
};

// 定义一个响应式数据来保存分组后的数据
const groupedData = ref<any[]>([]);

onMounted(() => {
    const someNewData: any[] = [];
    groupedData.value = someNewData;
});

const state = reactive({ ...useView(view), ...toRefs(view) });
</script>

<style scoped>
.container {
    width: 100%;
    margin-top: 10px;
}

.col-with-padding {
    line-height: 40px;
    height: 40px;
    font-size: 14px;
    padding: 0 5px;
}

.num {
    margin-left: 5px;
    border-radius: 50px;
    color: #fff;
    padding: 3px 3px 3px 3px;
    background-color: rgba(103, 194, 58, 1);
}
</style>